<template>
  <div class="flex gap-2" style="background: #fff; height: 40px; border-bottom: 1px solid #fa7765;">
    <el-tag v-for="tag in tags" :key="tag.path" :closable="tag.path === '/admin/index' ? false : true"
      :disable-transitions="false" :class="{'is-active': tag.active}" @close="handleTagClose(tag)"
      @click="handleTagClick(tag)" style="width: 80px; height: 38px; cursor: pointer;">
      {{ tag.title }}
    </el-tag>
  </div>
</template>

<script setup lang="ts">
  import { computed } from 'vue';
  import { useStore } from 'vuex';
  import { useRouter, useRoute } from 'vue-router';

  const store = useStore();
  const router = useRouter();
  const route = useRoute();

  const tags = computed(() => store.state.tags as Array<{ path: string, title: string, active: boolean }>);

  const handleTagClose = (tag: { path: string, title: string, active: boolean }) => {
    store.dispatch('removeTag', tag);
    router.go(-1); // 确保这是期望的行为  
  };

  const handleTagClick = (tag: { path: string, title: string, active: boolean }) => {
    if (route.path !== tag.path) {
      store.commit('ACTIVATE_TAG', tag.path);
      router.replace(tag.path); // 使用replace代替push  
    }
  };  
</script>

<style scoped>
  .flex {
    display: flex;
    align-items: center;
  }

  .button-new-tag {
    margin-left: 4px;
    /* 根据实际设计调整间距 */
  }

  .is-active {
    /* 这里添加激活状态的样式 */
    font-weight: bold;
    color: #fff;
    background-color: #fa7765;
    border: #fa7765;

    /* 根据你的设计调整样式 */
  }

  .el-tag.el-tag--primary {
    --el-tag-text-color: none;
  }

  .el-tag {
    border-radius: 0;
    border-top: 0;
    border-bottom: 0;
    border-left: 0;
  }
</style>